<template>
    <div class="dev" ref="target">
        <div class="bg-line mb-2">
            <div v-for="(i, k) in status2" class="list-item" :class="(k + 1) === status2.length ? 'bottom-1' : ''">
                <div class="list-item-div">
                    {{ i.name }}
                </div>
                <div class="list-item-1" v-if="i.type === 'switchs'">
                    <div class="el-switch" :class="i.value ? 'is-checked' : ''">
                        <span class="el-switch__core" :class="i.value ? 'isactive' : ''">
                            <div class="el-switch__action"></div>
                        </span>
                    </div>
                    <div>
                        <el-text :type="i.value ? 'success' : 'warning'" size="large">{{ i.value ? '开' : '关'
                            }}</el-text>
                    </div>
                </div>
                <div class="list-item-1" v-else>
                    {{ i.text }}
                </div>
            </div>


        </div>

        <div class="filwrap">
            <el-text size="small" type="info">数据时间：{{ moment(list?.t * 1000).format('MM-DD HH:mm:ss') }}</el-text>
            <el-text type="info" v-if="battery_percentage">
                <img :src="dianliang" width="32" alt="">
                {{ battery_percentage.value }}%
            </el-text>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useElementStyle } from '@vueuse/motion'
import { DeviceServiceDetailResult, DeviceStatusServiceStatusListResult, Icategory } from '../interface';
import { statedata, statedata2 } from '../statedata';
import moment from 'moment';
import { assign } from 'lodash-es';
import TuyaiotModel from '../../mysql_interface/tuyaiotmodel';
const p = defineProps<{ device: DeviceServiceDetailResult, list?: DeviceStatusServiceStatusListResult, tuyastate: Icategory[], v2set: TuyaiotModel.ITorganizeSet, specifications: any[] }>()

const target = ref<HTMLElement>()

const { style } = useElementStyle(target, (s) => {
    if (p.v2set.height) {
        s.height = p.v2set.height
    }

})

const dianliang = computed(() => {
    if (battery_percentage.value) {
        const value = battery_percentage.value.value
        if (value < 20) {
            return 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/tuya/805c30a508b08a3cf89ff704d5a71f6.png'
        } else if (value < 40) {
            return 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/tuya/58e05e575bf8fe4897831c94293cb03.png'
        } else if (value < 60) {
            return 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/tuya/3b4e5752a3d87adbd90bd0ad86a0a8e.png'
        } else if (value < 80) {
            return 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/tuya/88d9e3311ae80b80561ca1fdfb252ed.png'
        } else {
            return 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/tuya/7cf146b6b2becb8e78f39ac5a5eb842.png'
        }
    }
    return ''
})

const status2 = computed(() => {
    const id = p.device.id
    return p.list?.status?.filter(status => {
        const v = p.tuyastate?.find(t => t.name === p.device.category && status.code === t.code)
        return v
    }).filter(c => c.code !== 'battery_percentage').map(status => {
        const _category1 = p.tuyastate.find(t => t.name === p.device.category && status.code === t.code)
        const specofic = p.specifications.find(c => c.id === id)
        const category1 = specofic?.result.status.find(z => z.code === status.code)


        if (category1) {
            if (_category1) {
                category1.type = _category1.type
                category1.name = _category1.dataname || category1.name
                category1.options = _category1.options || category1.range?.map(c => {
                    return {
                        option: c,
                        value: c
                    }
                })
            }
            return {
                name: category1.name,
                value: status.value,
                code: status.code,
                text: statedata2(status.value, category1, p.device),
                type: category1.type
            }
        }
        return {
            name: '',
            value: status.value,
            code: status.code,
            text: status.code,
            type: 'state'
        }
    }) || []
})




const battery_percentage = computed(() => {
    return p.list?.status?.find(c => c.code === 'battery_percentage')
})



</script>

<style scoped>
.dev {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.el-switch {
    --el-switch-off-color: #656565;
}

.list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.list-item-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    color: var(--el-color-success);
    gap: 20px;
    --el-color-warning: #fbeb4f;
    overflow: hidden;
}

.isactive {
    --el-switch-on-color: var(--el-color-success);
    --el-color-white: var(--el-color-success-light-3);
}



.el-switch__core {
    height: 12px;
    cursor: default;
}

.el-switch__action {
    width: 20px;
    height: 20px;
}
</style>

<style>
.el-switch__core .el-switch__action {
    background: linear-gradient(#f3faf4, #69d775);
}
</style>